<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <template #title>
        <div>{{ $t("合计列表") }}</div>
        <div style="width: 560px">
          <div class="ml-8" style="float: right">
            <l-tool-btns
              :hasAdd="false"
              :hasTableSetting="true"
              @setting="handleSetting"
            />
          </div>
        </div>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
        :showSummary="true"
      />
    </l-panel>
  </l-layout>
</template>

<script>
const api = window.$api.demo.data;
export default {
  data() {
    return {
      // 表格参数
      tableLoading: false,
      tableData: [],
      columns: [
        {
          label: "编码",
          prop: "num",
          width: 120,
          align: "left",
          isNotAutoWrap: true,
        },
        {
          label: "名称",
          prop: "name",
          width: 170,
          align: "left",
          isNotAutoWrap: true,
        },
        {
          label: "购买方",
          children: [
            {
              label: "公司",
              prop: "company",
              width: 160,
              align: "left",
              isNotAutoWrap: true,
            },
            {
              label: "联系人",
              prop: "user",
              minWidth: 70,
              align: "left",
            },
          ],
        },
        {
          label: "付款信息",
          children: [
            {
              label: "金额",
              prop: "price",
              width: 80,
              align: "left",
              isSummary: true,
            },
            {
              label: "已付款",
              prop: "payed",
              width: 80,
              align: "left",
              isSummary: true,
            },
            {
              label: "未付款",
              prop: "unpay",
              width: 80,
              align: "left",
              isSummary: true,
            },
            {
              label: "支付方式",
              prop: "payType",
              minWidth: 70,
              align: "center",
            },
          ],
        },

        {
          label: "日期",
          prop: "time",
          minWidth: 120,
          align: "left",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSetting() {
      this.$refs.mainTable.openColumnsSetting();
    },
    handleSearch() {
      this.loadTableData();
    },
    async loadTableData() {
      this.tableLoading = true;
      let queryData = {};
      let data = await this.$awaitWraper(api.getList(queryData));
      if (data != null) {
        this.tableData = data;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
  },
};
</script>
